<template>
  <div class="main">
    <div class="left">
      <div
        class="box"
        v-for="item in dogArr"
        :key="item.id"
        @click="addLike($event, item.id)"
      >
        <div>
          <img :src="item.src" />
        </div>
        <p>{{ item.p }}</p>
      </div>
    </div>
    <div class="right">
      <h3>您喜欢的狗如下：</h3>
      <p v-for="(dog, index) in likeArr" :key="index">
        {{ dog }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dogArr: {
      type: Array,
    },
    likeArr: {
      type: Array,
    },
  },
  methods: {
    addLike($event, id) {
      this.$emit("add", id);
    },
  },
};
</script>

<style>
.main {
  display: flex;
}
.left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 600px;
}
.box {
  margin-top: 20px;
  width: 170px;
  height: 200px;
}
img {
  width: 170px;
  height: 170px;
}
.right {
  padding-left: 50px;
}
</style>